<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#ul1{padding:0; margin:0; list-style:none;  width:300px; height:28px;}
#ul1 li{float:left; background:url(star.gif) no-repeat 0 0; width:27px; height:28px; }

.active{ }
.default{ }
</style>
<script type="text/javascript">
var arr=['差评','不推荐','一般','推荐','强力推荐'];
window.onload=function(){
	var oUL = document.getElementById("ul1");
	var liList = oUL.getElementsByTagName("li");
	var isChecked = false;
	var checknum = -1;
	for(var i=0; i<liList.length; i++){
		liList[i].index = i;
		liList[i].onmouseenter = function(){
			//第一种情况，单击过了
			if( isChecked ){
				console.log(this.index +","+checknum)
				if(this.index > checknum) {
					for(var j=0; j<liList.length; j++){
						liList[j].style.background = "url(star.gif) no-repeat 0 0";
					}
					for(var k=0; k<=this.index; k++){
						liList[k].style.background = "url(star.gif) no-repeat 0 -28px";
					}
				} else {
					for(var m=checknum+1; m<liList.length; m++){
						liList[m].style.background = "url(star.gif) no-repeat 0 0";
					}
				}
			} else {//第二种情况，还没有单击
				for(var j=0; j<liList.length; j++){
					liList[j].style.background = "url(star.gif) no-repeat 0 0";
				}
				for(var k=0; k<=this.index; k++){
					liList[k].style.background = "url(star.gif) no-repeat 0 -28px";
				}
			}
		}
		liList[i].onclick = function(){
			isChecked = true;
			checknum = this.index;
		}
	}
	
	
	
}
</script>
</head>

<body>
<ul id="ul1" >
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
</ul>
<div id="div"></div>
</body>
</html>
